SponsorsPage.render - Code Metrics - Inspection of "New PSD games page in progress." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/psd-api ( 1320f3...32e3af )

by Kevin Van

created 2020-08-13 14:47 UTC

SponsorsPage.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	73
Code Lines	51

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	51
dl	0
loc	73
c	0
b	0
f	0
rs	8.6036
cc	1

How to fix Long Method

import React, { Component } from "react"
import { graphql } from "gatsby"

import Layout from "../layouts/index"

import SEO from "../components/seo"
import Sponsor from "../components/sponsor"

class SponsorsPage extends Component {
  render() {
    const { goldSponsors, silverSponsors, bronzeSponsors } = this.props.data
    return (
      <Layout>
        <SEO
          lang="nl-BE"
          title="Sponsors"
          description="Overzicht van de sponsors die KCVV Elewijt steunen."
          path={this.props.location.pathname}
        />
        <div className={"sponsors-overview__wrapper limited-width_wrapper"}>
          <section
            className={
              "sponsors-overview__section sponsors-overview__section--top"
            }
          >
            {goldSponsors.edges.map(({ node }, i) => {
              const website =
                (node.field_website && node.field_website.uri) || ``
              return (
                <Sponsor
                  key={i}
                  localFile={
                    node.relationships.field_media_image.relationships
                      .field_media_image.localFile
                  }
                  uri={website}
                />
              )
            })}
          </section>
          <section
            className={
              "sponsors-overview__section sponsors-overview__section--middle"
            }
          >
            {silverSponsors.edges.map(({ node }, i) => {
              const website =
                (node.field_website && node.field_website.uri) || ""
              return (
                <Sponsor
                  key={i}
                  localFile={
                    node.relationships.field_media_image.relationships
                      .field_media_image.localFile
                  }
                  uri={website}
                />
              )
            })}
          </section>
          <section
            className={
              "sponsors-overview__section sponsors-overview__section--bottom"
            }
          >
            {bronzeSponsors.edges.map(({ node }, i) => {
              const website =
                (node.field_website && node.field_website.uri) || ""
              return (
                <Sponsor
                  key={i}
                  localFile={
                    node.relationships.field_media_image.relationships
                      .field_media_image.localFile
                  }
                  uri={website}
                />
              )
            })}
          </section>
        </div>
      </Layout>
    )
  }
}

export const pageQuery = graphql`
  query {
    goldSponsors: allNodeSponsor(
      filter: {
        promote: { eq: true }
        status: { eq: true }
        field_type: { in: ["crossing"] }
      }
      sort: { fields: title, order: ASC }
    ) {
      edges {
        node {
          title
          field_type
          field_website {
            uri
          }
          relationships {
            field_media_image {
              field_media_image {
                alt
              }
              relationships {
                field_media_image {
                  localFile {
                    ...KCVVFluid480
                  }
                }
              }
            }
          }
        }
      }
    }
    silverSponsors: allNodeSponsor(
      filter: {
        promote: { eq: true }
        status: { eq: true }
        field_type: { in: ["green", "white"] }
      }
      sort: { fields: title, order: ASC }
    ) {
      edges {
        node {
          title
          field_type
          field_website {
            uri
          }
          relationships {
            field_media_image {
              field_media_image {
                alt
              }
              relationships {
                field_media_image {
                  localFile {
                    ...KCVVFluid480
                  }
                }
              }
            }
          }
        }
      }
    }
    bronzeSponsors: allNodeSponsor(
      filter: {
        promote: { eq: true }
        status: { eq: true }
        field_type: { in: ["training", "panel", "other"] }
      }
      sort: { fields: title, order: ASC }
    ) {
      edges {
        node {
          title
          field_type
          field_website {
            uri
          }
          relationships {
            field_media_image {
              field_media_image {
                alt
              }
              relationships {
                field_media_image {
                  localFile {
                    ...KCVVFluid480
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`

export default SponsorsPage


1			import React, { Component } from "react"
2			import { graphql } from "gatsby"
3
4			import Layout from "../layouts/index"
5
6			import SEO from "../components/seo"
7			import Sponsor from "../components/sponsor"
8
9			class SponsorsPage extends Component {
10			render() {
11			const { goldSponsors, silverSponsors, bronzeSponsors } = this.props.data
12			return (
13			<Layout>
14			<SEO
15			lang="nl-BE"
16			title="Sponsors"
17			description="Overzicht van de sponsors die KCVV Elewijt steunen."
18			path={this.props.location.pathname}
19			/>
20			<div className={"sponsors-overview__wrapper limited-width_wrapper"}>
21			<section
22			className={
23			"sponsors-overview__section sponsors-overview__section--top"
24			}
25			>
26			{goldSponsors.edges.map(({ node }, i) => {
27			const website =
28			(node.field_website && node.field_website.uri) \|\| ``
29			return (
30			<Sponsor
31			key={i}
32			localFile={
33			node.relationships.field_media_image.relationships
34			.field_media_image.localFile
35			}
36			uri={website}
37			/>
38			)
39			})}
40			</section>
41			<section
42			className={
43			"sponsors-overview__section sponsors-overview__section--middle"
44			}
45			>
46			{silverSponsors.edges.map(({ node }, i) => {
47			const website =
48			(node.field_website && node.field_website.uri) \|\| ""
49			return (
50			<Sponsor
51			key={i}
52			localFile={
53			node.relationships.field_media_image.relationships
54			.field_media_image.localFile
55			}
56			uri={website}
57			/>
58			)
59			})}
60			</section>
61			<section
62			className={
63			"sponsors-overview__section sponsors-overview__section--bottom"
64			}
65			>
66			{bronzeSponsors.edges.map(({ node }, i) => {
67			const website =
68			(node.field_website && node.field_website.uri) \|\| ""
69			return (
70			<Sponsor
71			key={i}
72			localFile={
73			node.relationships.field_media_image.relationships
74			.field_media_image.localFile
75			}
76			uri={website}
77			/>
78			)
79			})}
80			</section>
81			</div>
82			</Layout>
83			)
84			}
85			}
86
87			export const pageQuery = graphql`
88			query {
89			goldSponsors: allNodeSponsor(
90			filter: {
91			promote: { eq: true }
92			status: { eq: true }
93			field_type: { in: ["crossing"] }
94			}
95			sort: { fields: title, order: ASC }
96			) {
97			edges {
98			node {
99			title
100			field_type
101			field_website {
102			uri
103			}
104			relationships {
105			field_media_image {
106			field_media_image {
107			alt
108			}
109			relationships {
110			field_media_image {
111			localFile {
112			...KCVVFluid480
113			}
114			}
115			}
116			}
117			}
118			}
119			}
120			}
121			silverSponsors: allNodeSponsor(
122			filter: {
123			promote: { eq: true }
124			status: { eq: true }
125			field_type: { in: ["green", "white"] }
126			}
127			sort: { fields: title, order: ASC }
128			) {
129			edges {
130			node {
131			title
132			field_type
133			field_website {
134			uri
135			}
136			relationships {
137			field_media_image {
138			field_media_image {
139			alt
140			}
141			relationships {
142			field_media_image {
143			localFile {
144			...KCVVFluid480
145			}
146			}
147			}
148			}
149			}
150			}
151			}
152			}
153			bronzeSponsors: allNodeSponsor(
154			filter: {
155			promote: { eq: true }
156			status: { eq: true }
157			field_type: { in: ["training", "panel", "other"] }
158			}
159			sort: { fields: title, order: ASC }
160			) {
161			edges {
162			node {
163			title
164			field_type
165			field_website {
166			uri
167			}
168			relationships {
169			field_media_image {
170			field_media_image {
171			alt
172			}
173			relationships {
174			field_media_image {
175			localFile {
176			...KCVVFluid480
177			}
178			}
179			}
180			}
181			}
182			}
183			}
184			}
185			}
186			`
187
188			export default SponsorsPage
189

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/psd-api ( 1320f3...32e3af )

SponsorsPage.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like